@import '~antd/es/style/themes/default.less';

@textColor: #34aeef;
@bgColor: rgba(60, 60, 60, 0.2);
@borderColor: #282828;

.monitorWrapper {
  .layoutRight{
    display: flex;
    flex-direction: column;
  }

  .newRow {
    margin-left: 0;
    margin-right: 0;
  }

  .tableBody {
    height: calc(100% - 45px);
    position: relative;
  }

  .region {
    height: 50%;
    margin-bottom: 10px;
    border: 1px solid @borderColor;
  }

  .trend {
    height: calc(50% - 135px);
    border: 1px solid @borderColor;
  }

  .areaRange {
    height: 40%;
    margin-bottom: 10px;
    border: 1px solid @borderColor;
  }

  .areaRank {
    height: 60%;
    border: 1px solid @borderColor;
  }

  .bottomMainLeft, .bottomMainRight {
    width: 50%;
    height: 100%;
  }

  .bottomMainLeft {
    padding-left: 10px;
  }
  .bottomMainRight {
    padding-right: 10px;
  }

  .mapWrapper {
    width: 75%;
    height: 66%;
    // background-image: linear-gradient(to top, #000000 10%, rgba(0, 0, 0, 0.7) 40%, rgba(12, 12, 12, 0.1));
    @media screen and (min-width: 1400px){
      width: 77%;
    }
  }

  .rightItem{
    flex:1;
    margin-bottom: 0 8px 10px;
  }
}

.visualRight {
  right: 0;
}
